import { Component, OnInit  } from '@angular/core';
import { PickerController } from '@ionic/angular';
import { Router, NavigationExtras } from '@angular/router';
import { HttpClient, HttpHeaders } from "@angular/common/http";
import { DatePipe } from '@angular/common';
@Component({
  selector: 'app-notifications',
  templateUrl: './notifications.page.html',
  styleUrls: ['./notifications.page.scss'],
})
export class NotificationsPage implements OnInit {
  isTxn:boolean = true;
  dateTypes=[
    {
      num:'1',
      type:'111'
    },
    {
      num:'2',
      type:'222'
    }
  ];

  categorys=[
    {
      num:'1',
      type:'111'
    },
    {
      num:'2',
      type:'222'
    }
  ];

  defaultColumnOptions = [
    [
      'Dog',
      'Cat',
      'Bird',
      'Lizard',
      'Chinchilla'
    ]
  ]

  multiColumnOptions = [
    [
      'Minified',
      'Responsive',
      'Full Stack',
      'Mobile First',
      'Serverless'
    ],
    [
      'Tomato',
      'Avocado',
      'Onion',
      'Potato',
      'Artichoke'
    ]
  ];
  constructor(
    public pickerController:PickerController,
    public http: HttpClient,
    private router: Router,
    private datePipe : DatePipe
  ) { }

  txnList = [];
  sysList = [];
  ngOnInit() {
    let url = '/scm/app/transactionList.do';  
    let date = this.datePipe.transform(new Date(),'yyyy-MM-dd') ;
    this.http.post(url,{'appUserId':1}).subscribe( (response:any)=>{
      // console.info(response);
      response.responseBody.forEach(value=>{
        // value.transactionTime;
        let detail = value.details;
        for(let i =0;i<detail.length;i++){
          let item = detail[i];
          let transDate = this.datePipe.transform(item.transactionTime,'yyyy-MM-dd');
          if(date == transDate){
            item.transactionTime = this.datePipe.transform(item.transactionTime,'HH:mm');
          }else{
            item.transactionTime = this.datePipe.transform(item.transactionTime,'yyyy-MM-dd HH:mm');
          }
          this.txnList.push(item);
        }
      });
    });
    console.info(this.txnList);
    url = '/scm/app/getSystemNotificationList.do';   
    this.http.post(url,{'appUserId':'APP123'}).subscribe( (response:any)=>{
      console.info(response);
      this.sysList = response.responseBody;
      // this.txnList = response.responseBody;
      this.sysList.forEach(value=>{
        let notificationDate = this.datePipe.transform(value.notificationDate,'yyyy-MM-dd');
        if(date == notificationDate){
          value.notificationDate = this.datePipe.transform(value.notificationDate,'HH:mm');
        }else{
          value.notificationDate = this.datePipe.transform(value.notificationDate,'yyyy-MM-dd HH:mm');
        }
      });
    });
  }

  getColumnOptions(columnIndex, numOptions, columnOptions) {
    let options = [];
    for (let i = 0; i < numOptions; i++) {
      options.push({
        text: columnOptions[columnIndex][i % numOptions],
        value: i
      })
    }

    return options;
  }

  getColumns(numColumns, numOptions, columnOptions) {
    let columns = [];
    for (let i = 0; i < numColumns; i++) {
      columns.push({
        name: `col-${i}`,
        options: this.getColumnOptions(i, numOptions, columnOptions)
      });
    }

    return columns;
  }

  public async openPicker(numColumns = 1, numOptions = 5, columnOptions = this.defaultColumnOptions){
    const picker = await this.pickerController.create({
      columns: this.getColumns(numColumns, numOptions, columnOptions),
      buttons: [
        {
          text: 'Cancel',
          role: 'cancel'
        },
        {
          text: 'Confirm',
          handler: (value) => {
            console.log(`Got Value ${value}`);
          }
        }
      ]
    });

    await picker.present();
  }

  selectedOptions(evt){
    // console.info(evt);
    let val = evt.detail.value;
    if(val == 'txn'){
      this.isTxn = true;
    }else{
      this.isTxn = false;
    }
  }

  toDetail(data){
    let navigationExtras: NavigationExtras = {
      queryParams: data 
    };
    if(this.isTxn){
      this.router.navigate(['/tabs/myCredit/transaction-detail'],navigationExtras);
    }else{
      this.router.navigate(['/notifications/notification-detail'],navigationExtras);
    }
  }
}
